<template>
  <div class="item-panel">
    <div class="item-panel-search">
      <input
        type="text"
        class="search-input"
        ref="searchInput"
        placeholder="请输入组件名称 ..."
        :value="searchWord"
        @keyup.enter="handleSearch"
      />
      <el-button
        class="search-btn"
        icon="el-icon-search"
        @click="handleSearch"
      ></el-button>
    </div>
    <div class="item-panel-body">
      <item-panel-list
        v-if="computedItems.length !== 0"
        :initExpanded="true"
        :items="computedItems"
      >
      </item-panel-list>
      <item-panel-list
        v-for="(itemList, index) in itemLists"
        :key="index"
        :items="itemList"
      ></item-panel-list>
    </div>
  </div>
</template>

<script>
import ItemPanelList from "./item-panel-list.vue";
// import itemLists from "./items";
import itemLists from "./newItems2";

import "./index.less";

export default {
  name: "item-panel",
  components: {
    ItemPanelList,
  },
  data() {
    return {
      searchWord: "",
      itemLists: itemLists,
    };
  },
  computed: {
    computedItems() {
      if (this.searchWord === "") {
        return [];
      } else {
        const children = [];
        const resItems = { name: "搜索结果", children: children };
        this.itemLists.forEach((itemList) => {
          itemList.children.forEach((item) => {
            if (
              item.name.toLowerCase().includes(this.searchWord.toLowerCase())
            ) {
              children.push(item);
            }
          });
        });
        console.log(resItems);
        return resItems;
      }
    },
  },
  methods: {
    handleSearch() {
      const newVal = this.$refs.searchInput.value;
      if (this.searchWord !== newVal) {
        this.searchWord = newVal;
      }
    },
  },
};
</script>
